<!DOCTYPE html>
<html lang="en" class="no-js">

	<head>
		<base href="http://localhost:8080/time/user/" />
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>login</title>
		
		<link rel="apple-touch-icon" href="apple-touch-icon.png">
	    <link rel="shortcut icon" href="favicon.ico">
	    <link rel="icon" href="favicon.ico">
	    
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<!--必要样式-->
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		
	</head>
	<body >

		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<div class="logo_box">
						<h3>欢迎登录</h3>
						<form id="loginForm" action="/time/user_login.action" name="f" method="post" autocomplete="off">
							<span id="hintSpan" style="position: absolute; left: 40px; top: 90px ;color: orangered;" >  </span>
							<div class="input_outer">
								<span class="u_user"></span>
								<input name="username" class="text" style="color: #FFFFFF !important ;ime-mode:disabled;" type="text" placeholder="请输入账户" autocomplete="off">
							</div>
							
							<div class="input_outer">
								<span class="us_uer"></span>
								<!-- 谷歌浏览器会记录有password的表单提交页面,并自动回填,在css中将回填速度改成99999 -->
								<input name="password" id="pc" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;" value="" type="password" placeholder="请输入密码" autocomplete="off"  name="password" >
							</div>
							
							<!-- <span style="float: right; position: relative; bottom: 20px; color: #666 "> <input type="checkbox" name="rememberMe" value="miao" /> &nbsp; <span style="position: relative; bottom: 2px;"> 记住密码 </span> </span> -->
							<div class="mb2">
								<a class="act-but submit" href="javascript: login();" style="color: #FFFFFF ; height: 50px;">登录</a>
							</div>
							<div class="mb3" style="position: relative; left: 180px; bottom: 70px;">
								<a class="act-but submit" href="register.html" style="color: #FFFFFF">注册</a>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- /container -->
		<script src="js/TweenLite.min.js"></script>
		<script src="js/EasePack.min.js"></script>
		<script src="js/rAF.js"></script>
		<script src="js/demo-1.js"></script>
		<script src="js/jquery-2.1.0.min.js"></script>
		<div style="text-align:center;"></div>
	</body>

	<script type="text/javascript">
	
		$(function(){
			var time = new Date();
			var HH = time.getHours();
			if (HH > 18) {
				$('.demo-1,.large-header').css('background-image','url(private_img/loginBg_1.jpg)');
			} 
			
		});
		
		function login() {
			
			if ($("input[name=username]").val() == "" || $("input[name=password]").val() == "") {
				$("#hintSpan").html("用户名及密码不能为空");
				return ;
			}
			
			var json = $("#loginForm").serialize();
			
			$.post("/time/user_login.action",json,function(data){
				if(data.error=="用户名或密码错误"){
					$("#hintSpan").html(data.error);
				}else{
					// 又想重定向又想传递json少年你想多了
					window.location.href="http://localhost:8080/time/horologe.html";
				}
			}); 
			
		};
		
		
	</script>

</html>